<template>
  <ToolPageWrapper>
    <div class="w-full max-w-[1200px] flex-1 flex flex-col py-4 overflow-hidden h-full">
      <n-card class="w-full flex-1 rounded-xl shadow-md flex flex-col overflow-hidden relative bg-white/95 backdrop-blur-[10px] h-full min-h-0 md:rounded-xl md:shadow-lg" :title="title" :header-style="{ textAlign: 'left' }">
        <slot></slot>
      </n-card>
    </div>
  </ToolPageWrapper>
</template>

<script setup lang="ts">
import ToolPageWrapper from './ToolPageWrapper.vue';

defineProps<{
  title: string;
}>();
</script>

<style scoped lang="less">
// Make card content scrollable
:deep(.n-card__content) {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 105, 180, 0.3) transparent;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(255, 105, 180, 0.1);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 105, 180, 0.3);
    border-radius: 4px;

    &:hover {
      background: rgba(255, 105, 180, 0.5);
    }
  }
}

// Additional mobile padding
:deep(.n-card__content) {
  @media (max-width: 768px) {
    padding: 1rem !important;
  }
}

:deep(.n-card-header) {
  @media (max-width: 768px) {
    padding: 1rem !important;
  }
}
</style>
